<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>我的广告</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="true">
    <meta name="x5-page-mode" content="app">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <!-- css -->
    <link href="/zc/css/mui.min.css" rel="stylesheet">
    <link href="/zc/css/footer.css" rel="stylesheet">
    <link href="/zc/css/base.css" rel="stylesheet">
    <!-- js -->
    <script src="/zc/js/jquery.min.js"></script>
    <script src="/zc/js/mui.min.js"></script>
    <script src="/zc/js/template.js"></script>
    <script src="/zc/js/flexible.js"></script>
    <script src="/zc/js/flexible_css.js"></script>
    <script src="/zc/js/foot_bar.js"></script>
</head>
<style>
    .mui-segmented-control.mui-scroll-wrapper .mui-scroll,
    .mui-segmented-control.mui-scroll-wrapper {
        height: 1.533333rem;
    }

    .mui-segmented-control.mui-scroll-wrapper {
        border-bottom: .16rem solid #f1f1f1;
    }

    .trading_head a {
        text-decoration: none;
    }

    a {
        text-decoration: none;
    }
    .cx{
        width: 1.5rem;
        font-size: .35rem;
        height: .8rem;
        line-height: .8rem;
        color: #fff;
        border-radius: .1rem;
        background: #03BE87;
        border: 1px solid #03BE87;
        text-align: center;
    }
    .order_block .right .ns1{
        display: block;
    }
    .order_block .six{
        font-size: 15px;
    }
</style>

<body>
    <div id="app">
        <!-- 头部 -->
        <div class="trading_head">
            <a href="javascript:history.go(-1)">
                <div class="left">
                    <img src="/zc/img/fh.png" alt="">
                    <span>我的广告</span>
                </div>
            </a>
        </div>
        <!-- 内容 -->
        <div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <div class="otc_order active">
                    生成
                </div>
                <div class="otc_order">
                    完成
                </div>
                <div class="otc_order">
                    已撤销
                </div>
                <div class="otc_order">
                    所有订单
                </div>
            </div>
        </div>
        <div class="otc_order1">

        </div>
        <div style="height: 1.66667rem"></div>
        <!-- 底部导航 -->
        <div class="foot_bar">
            <div class="foot_block">
                <img class="ws1" src="/zc/img/a_icon1.png" alt="">
                <p>首页</p>
            </div>
            <div class="foot_block active">
                <img class="ws2" src="/zc/img/b_icon2.png" alt="">
                <p>OTC</p>
            </div>
            <div class="foot_block ">
                <img class="ws3" src="/zc/img/a_icon3.png" alt="">
                <p>交易</p>
            </div>
            <div class="foot_block">
                <img class="ws4" src="/zc/img/a_icon4.png" alt="">
                <p>资产</p>
            </div>
            <div class="foot_block">
                <img class="ws5" src="/zc/img/a_icon5.png" alt="">
                <p>我的</p>
            </div>
        </div>
    </div>
</body>

</html>


<script type="text/html" id="tpl">

    {{each info v }}
	<div class="order_block">
        <div class="left">
            <div>
                <%if(v.type==1){%>    
                <span style="color:#03BE87;font-size: .48rem">买入</span>
                <%}else{%>
                <span style="color:#03BE87;font-size: .48rem">卖出</span>
                <%}%>
                <span style="color:#333;font-size: .48rem;font-weight: bold">{{v.ftypename}}</span>
                <span class="nine">{{v.addtime}}</span>
            </div>
            <p class="nine">交易单价</p>
            <p class="six">{{v.price}}</p>
            <p class="nine">订单编号</p>
            <p class="six">{{v.ordersn}}</p>
        </div>
        <div class="right">
            <div class="ns1">
                <span class="six">
                <%if(v.status==1){%>
                    生成
                <%}else if(v.status==2){%>
                    完成
                <%}else if(v.status==3){%>
                    已撤销
                <%}%>
                </span>
            </div>
            <p class="nine">剩余数量</p>
            <p class="six">{{v.num}}</p>
            <p class="nine">全部数量</p>
            <p class="six">{{v.allnum}}</p>
            <%if(v.status==1){%>
            <div class="cx" data-id="{{v.id}}">撤销</div>
            <%}%>
        </div>
    </div>
    {{/each}}
</script>
<script type="text/html" id="tpl1">
<div class="zcmx_block1">
        <img src="/zc/img/zwsj.png" alt="">
        <div class="wz">暂无数据</div>
</div>
</script>
<script type="text/javascript">
    //获取滚动条当前的位置
    function getScrollTop() {
        var scrollTop = 0;
        if (document.documentElement && document.documentElement.scrollTop) {
            scrollTop = document.documentElement.scrollTop;
        } else if (document.body) {
            scrollTop = document.body.scrollTop;
        }
        return scrollTop;
    }
    //获取当前可视范围的高度  
    function getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
        } else {
            clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
        }
        return clientHeight;
    }
    //获取文档完整的高度 
    function getScrollHeight() {
        return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    }
    $(function () {
        var status = true;
        var param = {
            page: 1,
            limit: 10,
            status: 1
        }
        function loadList() {
            console.log(param)
            $.ajax({
                type: "POST",
                data: param,
                dataType: "jsonp",
                url: "/index/otcexchange/mypushorder",
                success: function (res) {
                    console.log(res)
                    if (res.code == 0) {
                        $('.otc_order1').append(template("tpl", res));
                        if (!res.info || res.info.length < param.limit) {
                            status = false;
                        }
                        $('.cx').off().on('click',function(){
                            var orderid=$(this).data('id');
                            $.ajax({
                                type: "post",
                                url: "/index/otcexchange/repealsmyorder",
                                data: {orderid:orderid},
                                dataType: "jsonp",
                                success: function (res) {
                                    if(res.code==0){
                                        mui.toast(res.msg);
                                        setTimeout(function(){
                                            location.reload();
                                        },1500);
                                    }else{
                                        mui.toast(res.msg);
                                    }
                                }
                            });
                        })
                    } else {
                        // $('.otc_order1').html(template("tpl1", res));
                    }
                }
            });
        }
        loadList();
        $('.otc_order').eq(0).click(function (e) {
            $('.otc_order').removeClass('active');
            $(this).addClass('active');
            param.page = 1;
            param.status = 1;
            $('.otc_order1').empty();
            loadList();
        });
        $('.otc_order').eq(1).click(function (e) {
            $('.otc_order').removeClass('active');
            $(this).addClass('active');
            param.page = 1;
            param.status = 2;
            $('.otc_order1').empty();
            loadList();
        });
        $('.otc_order').eq(2).click(function (e) {
            $('.otc_order').removeClass('active');
            $(this).addClass('active');
            param.page = 1;
            param.status = 3;
            $('.otc_order1').empty();
            loadList();
        });
        $('.otc_order').eq(3).click(function (e) {
            $('.otc_order').removeClass('active');
            $(this).addClass('active');
            param.page = 1;
            param.status = 0;
            $('.otc_order1').empty();
            loadList();
        });
        // 下拉加载
        $(window).off("scroll").on("scroll", function (e) {
            if (getScrollTop() + getClientHeight() == getScrollHeight() && res.info != '' && status) {
                if ($('.zhls').hasClass('active')) {
                    status = true;
                    param.page++;
                    loadList();
                }
            }
        });
    })
</script>